<template>
  <div class="practice">
    <h2>刷题模式</h2>
    <div v-if="currentQuestion">
      <div class="progress">题目进度：{{ currentIndex + 1 }}/{{ questions.length }}</div>
      <div class="q-title">{{ currentQuestion.question }}</div>
      <div class="q-options" v-if="currentQuestion.type !== 'coding'">
        <div v-for="(opt, idx) in currentQuestion.options" :key="idx">
          <label>
            <input
              v-if="currentQuestion.type === 'single' || currentQuestion.type === 'judge'"
              type="radio"
              :name="'option' + currentQuestion.id"
              :value="opt"
              v-model="userAnswer"
              :disabled="showResult"
            />
            <input
              v-if="currentQuestion.type === 'multiple'"
              type="checkbox"
              :value="opt"
              v-model="userAnswer"
              :disabled="showResult"
            />
            {{ opt }}
          </label>
        </div>
      </div>
      <div v-else>
        <textarea v-model="userAnswer" :disabled="showResult" placeholder="请在此输入你的代码答案..." rows="5" style="width:100%"></textarea>
      </div>
      <div class="actions">
        <button @click="prevQuestion" :disabled="currentIndex === 0">上一题</button>
        <button v-if="!showResult" @click="submitAnswer">提交</button>
        <button v-else @click="nextQuestion" :disabled="currentIndex === questions.length - 1">下一题</button>
        <button @click="toggleFavorite">{{ isFavorite ? '取消收藏' : '收藏' }}</button>
        <button v-if="showResult && !isWrong" @click="addWrong">标记错题</button>
      </div>
      <div v-if="showResult" class="result">
        <div :class="isCorrect ? 'correct' : 'wrong'">
          {{ isCorrect ? '回答正确！' : '回答错误！' }}
        </div>
        <div class="explanation">
          <strong>正确答案：</strong> {{ currentQuestion.answer.join(', ') }}<br />
          <strong>解析：</strong> {{ currentQuestion.explanation }}
        </div>
      </div>
    </div>
    <div v-else>
      <p>暂无题目</p>
    </div>
    <router-link to="/question-bank" class="back-btn">返回题库</router-link>
  </div>
</template>

<script>
import questions from '../api/mockQuestions';

function getLocal(key, def) {
  try {
    return JSON.parse(localStorage.getItem(key)) || def;
  } catch {
    return def;
  }
}
function setLocal(key, val) {
  localStorage.setItem(key, JSON.stringify(val));
}

export default {
  name: 'PracticePage',
  data() {
    return {
      questions,
      currentIndex: 0,
      userAnswer: '',
      showResult: false,
      favorites: getLocal('favorites', []),
      wrongs: getLocal('wrongs', []),
      answerRecord: getLocal('answerRecord', {}),
    };
  },
  computed: {
    currentQuestion() {
      return this.questions[this.currentIndex];
    },
    isFavorite() {
      return this.favorites.includes(this.currentQuestion.id);
    },
    isWrong() {
      return this.wrongs.includes(this.currentQuestion.id);
    },
    isCorrect() {
      if (!this.showResult) return null;
      const ans = this.currentQuestion.answer;
      if (this.currentQuestion.type === 'multiple') {
        return Array.isArray(this.userAnswer) &&
          ans.length === this.userAnswer.length &&
          ans.every(a => this.userAnswer.includes(a));
      } else if (this.currentQuestion.type === 'coding') {
        // 编程题不做自动判分
        return null;
      } else {
        return Array.isArray(this.userAnswer)
          ? ans[0] === this.userAnswer[0]
          : ans[0] === this.userAnswer;
      }
    },
  },
  watch: {
    currentIndex() {
      this.resetAnswer();
    },
  },
  methods: {
    resetAnswer() {
      this.userAnswer = this.currentQuestion.type === 'multiple' ? [] : '';
      this.showResult = false;
    },
    submitAnswer() {
      this.showResult = true;
      // 记录答题
      const record = getLocal('answerRecord', {});
      record[this.currentQuestion.id] = {
        answer: this.userAnswer,
        correct: this.isCorrect,
      };
      setLocal('answerRecord', record);
      this.answerRecord = record;
    },
    prevQuestion() {
      if (this.currentIndex > 0) this.currentIndex--;
    },
    nextQuestion() {
      if (this.currentIndex < this.questions.length - 1) this.currentIndex++;
    },
    toggleFavorite() {
      let fav = getLocal('favorites', []);
      const id = this.currentQuestion.id;
      if (fav.includes(id)) {
        fav = fav.filter(f => f !== id);
      } else {
        fav.push(id);
      }
      setLocal('favorites', fav);
      this.favorites = fav;
    },
    addWrong() {
      let wrongs = getLocal('wrongs', []);
      const id = this.currentQuestion.id;
      if (!wrongs.includes(id)) {
        wrongs.push(id);
        setLocal('wrongs', wrongs);
        this.wrongs = wrongs;
      }
    },
  },
  mounted() {
    this.resetAnswer();
  },
};
</script>

<style scoped>
.practice {
  max-width: 600px;
  margin: 32px auto;
  padding: 32px 24px 24px 24px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 24px 0 rgba(0,0,0,0.08);
}
.progress {
  color: #888;
  margin-bottom: 16px;
  font-size: 15px;
  font-weight: 500;
}
.q-title {
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 18px;
  color: #222;
}
.q-options {
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.q-options label {
  display: flex;
  align-items: center;
  background: #f7f8fa;
  border-radius: 8px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.2s;
  border: 1.5px solid transparent;
}
.q-options label:hover {
  background: #e6f0ff;
}
.q-options input[type="radio"],
.q-options input[type="checkbox"] {
  margin-right: 10px;
  accent-color: #409eff;
}
.q-options input:checked + span,
.q-options input:checked {
  font-weight: bold;
  color: #409eff;
}
textarea {
  border-radius: 8px;
  border: 1.5px solid #e0e0e0;
  padding: 10px;
  font-size: 15px;
  background: #f7f8fa;
  margin-bottom: 18px;
  transition: border 0.2s;
}
textarea:focus {
  border: 1.5px solid #409eff;
  outline: none;
}
.actions {
  margin-bottom: 18px;
  display: flex;
  gap: 14px;
}
.actions button {
  background: #409eff;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 20px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 8px 0 rgba(64,158,255,0.08);
}
.actions button:disabled {
  background: #dbeafe;
  color: #aaa;
  cursor: not-allowed;
}
.actions button:hover:not(:disabled) {
  background: #1976d2;
}
.result {
  margin: 20px 0 10px 0;
  padding: 18px 16px;
  border-radius: 10px;
  background: #f6f9f6;
  box-shadow: 0 2px 8px 0 rgba(46,204,64,0.06);
}
.correct {
  color: #27ae60;
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 8px;
}
.wrong {
  color: #e74c3c;
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 8px;
}
.explanation {
  color: #444;
  font-size: 15px;
  margin-top: 6px;
}
.back-btn {
  display: inline-block;
  margin-top: 18px;
  color: #fff;
  background: #409eff;
  border-radius: 8px;
  padding: 8px 24px;
  font-size: 15px;
  text-decoration: none;
  font-weight: 500;
  box-shadow: 0 2px 8px 0 rgba(64,158,255,0.08);
  transition: background 0.2s, box-shadow 0.2s;
  border: none;
}
.back-btn:hover {
  background: #1976d2;
  text-decoration: none;
  box-shadow: 0 4px 16px 0 rgba(64,158,255,0.15);
}
@media (max-width: 700px) {
  .practice {
    padding: 16px 4vw;
    border-radius: 0;
    box-shadow: none;
  }
}
</style> 